<%--
  Created by IntelliJ IDEA.
  User: DELL
  Date: 2021/6/24
  Time: 21:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<script src="js/jquery-3.6.0.min.js"></script>
<html>
<head>
    <title>用户注册页面</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            border: 0;
        }
        body{
            background-color:#afeeee;
            background: url("image/9.png");
            background-repeat: no-repeat;
            /*opacity: 0.6;*/
        }
        h1{
            background-color: white ;
            height: 50px;
            color:black;
            top: 10px;
            font-size: 30px;
            font-weight: bold;
            font-family: 楷体;
            text-align: center;
        }
        h2{
            color: black;
            float: right;
            font-size: 20px;
            font-family: 楷体;
        }
        .class1{
            margin: 20px ;
            float: left;
        }
        form{
            background-color: white;
            font-size: 20px;
            font-family: 楷体;
            border: 2px cornflowerblue solid;
            /*opacity: 0.8;*/
            width: 440px;
            height: 620px;
            margin: 20px 50px 10px 480px;
            text-align: center;
        }
        footer {
            background-color: white ;
            height: 50px;
            color: black;
            text-align: center;
        }
        a{
            font-family: 楷体;
            color:black;
            font-size: 20px;
            text-align: center;
            margin: 0px 0px 0px 50px;
        }
        a:hover{
            color: cornflowerblue;
        }
        .class7{
            font-size:26px;
            font-family: 楷体;
            text-align: center;
            font-weight: bold;
        }
        .class11 {
            font-family: 楷体;
            font-size: 16px;
            color: black;
        }
        .wenben1{
            font-size: 16px;
            font-style: italic;
        }
        .submit1:hover{
            color: red;
        }
        .reset1:hover{
            color: red;
        }
        .submit1{
            width: 4em;
            height:2em;
            background: #87cecb;
            font-size: 16px;
            text-align:center;
            margin: 0px 20px 0px 0px;
        }
        .reset1{
            width: 4em;
            height:2em;
            background: #87cecb;
            font-size: 16px;
            text-align: center;
        }
        .biankuang{
            width: 200px;
            height: 30px;
        }
    </style>
</head>
<body>
<h1>642住房公积金欢迎你的访问！</h1>
<h2>我们将为你提供最贴心的服务！</h2>
<br><br><br><br>
<div class="class1">
</div>
<div class="class2">
    <form action="person" method="post" >
        <div class="class7">
            <br>
            个人开户平台
        </div>
        <br><br>
        姓名：<input type="text" name="NAME" required placeholder="请输入真实姓名" style="border:2px black solid" class="biankuang"></li> <br><br>
        证件类型：<select style="border:2px black solid" name="IDTYPE"
                     onblur=""
                     class="biankuang">
        <option value="1">身份证</option>
        <option value="2">军官证</option>
        <option value="3">护照</option>
        <option value="4">其他</option>
    </select><br>
        <p class="wenben1">（非常抱歉，目前仅支持身份证，对你造成的困扰，我们深感抱歉！）</p><br>
        证件号码：<input type="text" required placeholder="请输入身份证号" name="IDNUMBER" pattern="^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$"
                    style="border:2px black solid" class="biankuang"><br><br>
        缴纳基数：<input type="text" name="BASENUMBER" required placeholder="请输入您的缴纳基数" style="border:2px black solid" class="biankuang"><br><br>
        单位账号：<input type="text" required placeholder="请输入不超过12位的单位账号" id="UNITACCNUM" name="UNITACCNUM" style="border:2px black solid"
                    onblur="a1()" class="biankuang"><br><br>
        单位名称：<input type="text" disabled name="UNITNAME" id="UNITNAME" value="XX集团" class="biankuang"><br><br>
        单位比例：<input type="text" disabled name="UNITPROP" id="UNITPROP" value="0.00" class="biankuang"><br><br>
        个人比例：<input type="text" disabled name="INDIPROP" id="INDIPROP" value="0.00" class="biankuang"><br><br>
        <input type="submit" value="提交" class="submit1">
        <input type="reset" value="重置" class="reset1">
    </form>
</div>
<footer>
    <div class="class4">
        <a href="null.jsp" target="_blank" class="class11">关于642住房公积金</a>  &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp|
        &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp<a href="null.jsp" target="_blank" class="class11">本站声明</a> &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp|
        &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp<a href="null.jsp" target="_blank" class="class11">新手指南</a> &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp|
        &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp<a href="null.jsp"target="_blank" class="class11">联系我们</a> &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp|
    </div>
    <div class="class5">
        <a href="null.jsp" target="_blank" class="class11">技术支持电话：123456789</a>  &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp|
        &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp<a href="null.jsp" target="_blank" class="class11">住房公积金投诉举报电话：987654321</a>
    </div>
</footer>
</body>
</html>

<script type="text/javascript">
    function a1() {
        $.ajax({
            url:"/ajax1",
            data:{'name':document.getElementById("UNITACCNUM").value},
            success:function (data){
                alert(data);
            }
        });
    }
</script>